<template>
  <div v-resize-rf="onResize" class="d-table">
    <el-table
      ref="elTable"
      :data="list"
      header-row-class-name="d-table-header"
      stripe
      :height="autoTableHeight"
      @selection-change="onSelectionChange"
      @sort-change="onSortChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="studentCode" label="学号" />
      <el-table-column prop="studentName" label="姓名" />
      <el-table-column prop="dictSysUserSex" label="性别">
        <template #default="scope">
          <div>
            {{ dictToName('sys_user_sex', scope.row.dictSysUserSex) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="studentCallNum" label="手机号码" />
      <el-table-column prop="dictCultivationLevel" label="培养层次">
        <template #default="scope">
          <div>
            {{ dictToName('cultivation_level', scope.row.dictCultivationLevel) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="班级" />
      <el-table-column prop="grade" label="班级年份" />

      <el-table-column prop="collegeName" label="所属学院" />
      <el-table-column prop="professionName" label="所属系" />
      <el-table-column prop="studentCoverImgUrl" label="照片" align="center">
        <template #default="scope">
          <el-popover
            v-if="scope.row.studentCoverImgUrl"
            placement="top-start"
            width="340"
            trigger="hover"
          >
            <img :src="scope.row.studentCoverImgUrl" alt="" class="img-popover" />
            <template #reference>
              <img class="img-popover-small" :src="scope.row.studentCoverImgUrl" alt="" />
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="80">
        <template #default="scope">
          <el-button size="small" type="danger" text @click="emits('del', scope.row)">
            移出本班级
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { initDict, dictToName } from '@/utils/dictToName.js'
initDict('cultivation_level')

const emits = defineEmits(['detail', 'edit', 'del', 'update:modelValue', 'sortChange'])
defineProps({
  list: {
    type: Array,
    default: () => {
      return []
    },
  },
  selection: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const autoTableHeight = ref(200)

function onResize({ height }) {
  nextTick(() => {
    autoTableHeight.value = height
  })
}

function onSelectionChange(val) {
  const idx = val.map((item) => {
    return item.id
  })
  emits('update:modelValue', idx)
}

function onSortChange({ column, prop, order }) {
  let data = {
    orderByColumn: '',
    isAsc: '',
  }

  if (order === 'descending') {
    data = {
      orderByColumn: prop,
      isAsc: 'desc',
    }
  }

  if (order === 'ascending') {
    data = {
      orderByColumn: prop,
      isAsc: 'asc',
    }
  }

  emits('sortChange', data)
}
</script>

<style lang="scss" scoped>
.img-popover {
  width: 300px;
  height: 300px;
}
.img-popover-small {
  width: 50px;
  height: 50px;
}
</style>
